
<!-- Tab 第一次代码 开始啦-->
<!-- <template>
  <div>
    <tab :tab-data="tabData"></tab>
  </div>
</template>

<script>
import Tab from './components/Tab/index.vue';

export default {
  name: 'App',
  components: {
    Tab
  },
  data() {
    return {
      tabData: {
        intialIndex: 1,
        searchValue: 'This is CONTENT-3!',
        data: [
          { id: 1, itemTitle: 'NAV-1', title: 'Title-1', content: 'This is CONTENT-1!' },
          { id: 2, itemTitle: 'NAV-2', title: 'Title-2', content: 'This is CONTENT-2!' },
          { id: 3, itemTitle: 'NAV-3', title: 'Title-3', content: 'This is CONTENT-3!' },
          { id: 4, itemTitle: 'NAV-4', title: 'Title-4', content: 'This is CONTENT-4!' }
        ]
      }
      }
    }
  }

</script> -->
<!-- Tab 第一次代码 结束啦-->

<!-- ******************************* -->

<!-- Tab第二次代码 开始啦 -->
<!-- <template>
  <div>
    <tab 
      :tab-data="tabData"
    ></tab>
  </div>
</template>

<script>
import Tab from './components/TabExe/index.vue'

export default {
  name: 'App',
  components: {
    Tab
  },
  data() {
    return {
      tabData: {
        intialIndex: 2,
        data: [
          { id: 1, itemTitle: 'TAB-1', title: 'Title-1', content: 'This is CONTENT-1!' },
          { id: 2, itemTitle: 'TAB-2', title: 'Title-2', content: 'This is CONTENT-2!' },
          { id: 3, itemTitle: 'TAB-3', title: 'Title-3', content: 'This is CONTENT-3!' },
          { id: 4, itemTitle: 'TAB-4', title: 'Title-4', content: 'This is CONTENT-4!' },
          { id: 5, itemTitle: 'TAB-5', title: 'Title-5', content: 'This is CONTENT-5!' }
        ]
      }
    }
  }

}
</script> -->
<!-- Tab第二次代码 结束啦 -->

<!-- -------------------------------------------------------- -->

<!-- Model 第一次代码 开始啦(关于组件插槽的例子) -->
<!-- <template>
  <div>

    <button 
      @click="openModal"
      v-show="!modalShow"
      class="openModal"
      >打开</button>

    <modal
      width="500"
      :confirm-btn="confirmText"
      cancel-btn="取消"
      :modal-show="modalShow"
      modal-title="This is my MODAL"
      type="warning"
      :disabled="disabled"
      @modal-confirm="modalConfirm"
      @modal-cancel="modalCancel"
    >

      <my-form
        :my-username="myUsername"
        :my-password="myPassword"
        @updata:my-username="updateMyUsername"
        @updata:my-password="updateMyPassword"
      ></my-form>
    </modal>
  </div>
</template> -->

<!-- 
    传入不同的type 颜色是不同的
    primary    blue
    success    green
    danger     red
    warning    orange
 -->

<!-- <script>
import Modal from './components/Modal/index.vue'
import MyForm from './components/MyForm/index.vue'

export default {
  name: 'App',
  components: {
    Modal,
    MyForm
  },
  data() {
    return {
      modalShow: true,
      myUsername: '',
      myPassword: '',
      confirmText: '确定',
      disabled:false
    }
  },
  methods: {
    openModal() {
      this.modalShow = true;
    },
    modalConfirm() {
      this.confirmText = '提交中...';
      this.disabled = true;
      setTimeout(() => {
        console.log(this.myUsername, this.myPassword);
        this.myUsername = '';
        this.myPassword = '';
        this.confirmText = '确定'
        this.disabled = false;
      }, 1000);
    },
    modalCancel() {
      this.modalShow = false;
    },
    updateMyUsername(newValue) {
      this.myUsername = newValue;
    },
    updateMyPassword(newValue) {
      this.myPassword = newValue;
    }
  }
}
</script>

<style>
.openModal {
  background-color: orange;
  color: #333;
  margin: 100px auto;
}
</style> -->
<!-- Model 第一次代码 结束啦(关于组件插槽的例子) -->

<!-- ******************************* -->

<!-- Model 第二次代码 开始啦(关于组件插槽的例子) -->
<!-- <template>
  <div class="app">
    <button 
      class="open" 
      v-show="!isShow"
      @click="openModel"
    >打开 Model</button>
    <model-exe
      :is-show="isShow"
      :model-title="modelTitle"
      :cancel-btn-text="cancelBtnText"
      :comfirm-btn-text="comfirmBtnText"
      :loading-text="loadingText"
      :type="type"
      :is-loading="isLoading"
      @model-cancel="modelCancel"
      @model-Comfirm="modelComfirm"
    >
      <my-form-exe
        :username="username"
        :password="password"
        @update:my-username="updateMyUsername"
        @update:my-password="updateMyPassword"
      ></my-form-exe>
    </model-exe>
  </div>
</template> -->

<!-- 
  warning   orange
  danger    red
  primary   blue
  success   green
 -->

<!-- <script>
import ModelExe from './components/ModelExe/index.vue'
import MyFormExe from './components/MyFormExe/index.vue'

export default {
  name: 'App',
  components: {
    ModelExe,
    MyFormExe
  },
  data() {
    return {
      isShow:true,
      modelTitle: 'This is my Model!',
      comfirmBtnText: '确定',
      cancelBtnText: '取消',
      loadingText:'正在提交',
      type: 'warning',
      username: '',
      password: '',
      // isDisabled:false
      isLoading:false
    }
  },
  methods: {
    openModel() {
      this.isShow = true;
    },
    modelCancel() {
      this.isShow = false;
    },
    modelComfirm() {
      if (this.username && this.password) {
        this.isLoading = true;
        setTimeout(() => {
          console.log(this.username, this.password);
          this.isLoading = false;
          this.username = '';
          this.password = '';
        }, 1000);
      } else {
        alert('username 和 password不能为空');
      }
    },
    updateMyUsername(value) {
      this.username = value;
    },
    updateMyPassword(value) {
      this.password = value;
    }
  }
}
</script>

<style lang="scss">
.app {
  width: 1200px;
  height: 700px;
  margin: 0 auto;

  .open {
    margin: 100px auto;
    background-color: orange;
    color: #999;
  }
}
</style> -->

<!-- Model 第二次代码 开始啦(关于组件插槽的例子) -->

<!-- ---------------------------------------------------- -->

<!-- 动态组件 is <component> 开始啦 -->
<!-- <template>
  <div class="app">
    <recommend-tab
      :rt-data="rtData"
      :init-index="initIndex"
    ></recommend-tab>
  </div>
</template>

<script>
import RecommendTab from './components/RecommendTab/index.vue'

export default {
  name: 'App',
  components: {
    RecommendTab
  },
  data() {
    return {
      rtData: [
        [
          {
            id: 1,
            subject: 'Chinese',
            title: 'NO-1',
            content:'This is NO-1 content!'
          },
          {
            id: 2,
            subject: 'Chinese',
            title: 'NO-2',
            content: 'This is NO-2 content!'
          },
          {
            id: 3,
            subject: 'Chinese',
            title: 'NO-3',
            content: 'This is NO-3 content!'
          }
        ],
        [
          {
            id: 1,
            subject: 'English',
            title: 'Class-1',
            content: 'This is Class-1 content!',
            teacher:'张三'
          },
          {
            id: 2,
            subject: 'English',
            title: 'Class-3',
            content: 'This is Class-2 content!',
            teacher: '李四'
          }
        ],
        [
          {
            id: 1,
            subject: 'Music',
            song: 'NO-1',
            instrument: 'piano'
          },
          {
            id: 2,
            subject: 'Music',
            song: 'NO-2',
            instrument: 'guita'
          },
          {
            id: 3,
            subject: 'Music',
            song: 'NO-3',
            instrument: '二胡'
          }
        ]
      ],
      initIndex:2
    }
  }
}
</script> -->
<!-- 动态组件 is <component> 结束啦 -->

<!-- ---------------------------------------------------- -->

<!-- 基本布局 开始啦 -->
<!-- <template>
  <div class="app">
    <base-layout>
      <template #baseHeader>
        <my-logo></my-logo>
      </template>

      <template #baseFooter>
        <my-footer-content></my-footer-content>
      </template>

      <template #baseSiderbar>
        <my-sidebar></my-sidebar>
      </template>
      
      <template #default></template>
    </base-layout>
  </div>
</template>

<script>
import BaseLayout from './components/BaseLayout/index.vue'
import MyLogo from './components/MyLogo/index.vue'
import MyFooterContent from './components/MyFooterContent/index.vue'
import MySidebar from './components/MySidebar/index.vue'

export default {
  name: 'App',
  components: {
    BaseLayout,
    MyLogo,
    MyFooterContent,
    MySidebar
  }
}
</script> -->
<!-- 基本布局 结束啦 -->

<!-- ---------------------------------------------------- -->

<!--  MenuTree 开始啦 -->
<!-- <template>
  <div class="app">
    <div class="menu">
      <menu-tree>
        <template v-for="item of menuData">
          <menu-item 
            v-if="!item.child"
            :key="item.id"
          >{{ item.title }}</menu-item>
          <circle-item 
              v-else 
              :key="item.id"
              :data="item"></circle-item>
        </template>
      </menu-tree>
    </div>
  </div>
</template>

<script>
import MenuTree from './components/MenuTree/index.vue'
import MenuItem from './components/MenuTree/menuItem.vue'
import SubMenu from './components/MenuTree/subMenu.vue'
import MenuData from './data/menuTree.json'
import CircleItem from './components/MenuTree/circleItem.vue'

export default {
  name: 'App',
  components: {
    MenuTree,
    MenuItem,
    SubMenu,
    CircleItem
  },
  data() {
    return {
      menuData: MenuData
    }
  }
}
</script>

<style>
.menu {
  width: 200px;
}
</style> -->
<!--  MenuTree 结束啦 -->

<!-- ---------------------------------------------------- -->

<!-- TodoList开始啦  provide/reject的应用 -->
<!-- <template>
  <div class="app">
    <todo-list></todo-list>
  </div>
</template>

<script>
import TodoList from './components/TodoList/index.vue'

export default {
  name: 'App',
  components: {
    TodoList
  }
}
</script>

<style>
.app {
  margin: 30px 30px;
}
</style> -->
<!-- TodoList结束啦  provide/reject的应用 -->

<!-- ---------------------------------------------------- -->
<template>
  <div>
    <login-tab></login-tab>
  </div>
</template>

<script>
import LoginTab from './components/LoginTab/index.vue';

export default {
  name: 'App',
  components: {
    LoginTab
  }
}
</script>

<style>

</style>